<%-- 
    Document   : register_content
    Created on : 17-Jul-2013, 15:39:14
    Author     : MrMAD
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

        <style>
            td{
                padding: 10px;
            }
            button{
                background: url("http://localhost:8080/FinalProject/images/templatemo_h1_bg.jpg") no-repeat scroll center center transparent;
                color: #FFFFFF;
                display: block;
                float: left;
                height: 30px;
                line-height: 25px;
                margin: 10px 0 0;
                text-align: center;
                text-decoration: none;
                width: 100px;
            }
            #button{
                background: url("http://localhost:8080/FinalProject/images/templatemo_h1_bg.jpg") no-repeat scroll center center transparent;
                color: #FFFFFF;
                display: block;
                float: left;
                height: 30px;
                line-height: 25px;
                margin: 10px 0 0;
                text-align: center;
                text-decoration: none;
                width: 100px;
            }
            input{
                width: 100%;
            }
            textarea{
                width: 100%;
            }
            p {                                                
                color: #969547;          
                font-size: 13px;
                margin: 0 0 15px;
                padding: 10px;                
                width: 600px;
            }
        </style>                     
    </head>
    <body>
        <script src="js/register.js"></script>        

        <div id="templatemo_content_right">
            <fieldset style="border: 1px dashed #e6e154; width: ">
                <legend style="color: #e6e154; font-size: 17px; padding-bottom: 10px;">Please fill your registration form</legend>                
                <p id="error" style="padding-left: 10px"></p>                
                <%
                if(session.getAttribute("validEmail") != null){
                    session.setAttribute("validEmail", null);
                    out.println("<p style=\"padding-left: 10px;\">Email has already been used</p>");                    
                }
                %>
                <form name="register_form" method="POST" action="http://localhost:8080/FinalProject/MyProcess/register_process.jsp" style="color: #e6e154; font-size: 15px; padding-bottom: 10px;">
                    <table>
                        <tr>
                            <td>User name</td>
                            <td><input type="text" name="name" maxlength="50"/></td>                            
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td><input type="text" name="email" maxlength="100"/></td>                            
                        </tr>                        
                        <tr>
                            <td>Password</td>
                            <td><input type="password" name="password" maxlength="50"/></td>                            
                        </tr>
                        <tr>
                            <td>Password confirm</td>
                            <td><input type="password" name="confirm" maxlength="50"/></td>                            
                        </tr>
                        <tr>
                            <td>Phone</td>
                            <td><input type="text" name="phone" size="11" onkeypress="return check_num(this,11,event)"/></td>                            
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td><textarea cols="35" rows="4" name="address" maxlength="200"></textarea></td>                            
                        </tr>
                        <tr>
                            <td>Company</td>
                            <td><input type="text" name="company" maxlength="100"/></td>                            
                        </tr>
                        <tr>
                            <td>Date of birth</td>

                            <td>
                                <select name="day" id="day">                                    
                                    <%
                                        for (int i = 1; i <= 31; i++) {
                                    %>
                                    <option value="<%=i%>" ><%=i%></option>
                                    <%
                                        }
                                    %>
                                </select>

                                <select id="month" name="month">                                    
                                    <%
                                        for (int i = 1; i <= 12; i++) {
                                    %>
                                    <option value="<%=i%>" ><%=i%></option>
                                    <%
                                        }
                                    %>
                                </select>

                                <select name="year" id="year">                                    
                                    <%
                                        for (int i = 1960; i <= 2012; i++) {
                                    %>
                                    <option value="<%=i%>" ><%=i%></option>
                                    <%
                                        }
                                    %>                                    
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td><input  id="button" type="submit" value="Register"/></td>
                            <td><button onclick="reset()">Reset</button></td>
                        </tr>
                    </table>
                </form>
            </fieldset>
        </div><!-- end of content right -->

        <script>
            var validator = new FormValidator('register_form', [{
                    name: 'name',                    
                    rules: 'required'
                }, {
                    name: 'email',                    
                    rules: 'valid_email|required'
                }, {
                    name: 'password',
                    rules: 'required'
                }, {
                    name: 'confirm',
                    display: 'password confirmation',
                    rules: 'required|matches[password]'
                }, {
                    name: 'phone',                    
                    rules: 'min_length[10]|required'                   
                }, {
                    name: 'address',                    
                    rules: 'required'
                }], function(errors, event) {
                if (errors.length > 0) {
                    var errorString = '';

                    for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
                        errorString += errors[i].message + '<br />';
                    }

                    var el = document.getElementById("error");
                    el.innerHTML = errorString;
                } 
            }); 
        </script>
    </body>
</html>
